1. Introduction to the Course

  1. Course description
    • Students examine a variety of new advanced concepts and technologies involved in the design, implementation, operation of web-based information systems, and programming/scripting languages. Emphasis is placed on the advanced technologies for rich web applications, including the aspect of web programming paradigm; the information exchange between client and server; [the model-view-controller architecture;] web application libraries and frameworks; [content management systems;] web services; [web data mining;] real-time applications[; and security issues].
  2. Prerequisites
    • HTML5
    • CSS3
    • JavaScript
    • PHP
    • jQuery
    • Ajax
    • MySQL
    • Experience of the development of dynamic web applications
    • The Linux environment, e.g., Ubuntu
      • 'PuTTy' and 'WinSCP', your account in cs.tru.ca, or your Ubuntu computer; Online Node.js (or NodeJS) compilers are not convenient because you need to access the system.
      • Basic of the command line interface (CLI)
      • A text editor, such as 'nano' and 'vi'
  3. Motivations
    • In the previous courses, COMP 2680 and COMP 3540, we have studied how to develop web applications over one client and one server (the 1-1 model), using DB in the server, MVC in the server, SPA in the client, AJAX, and JSON. We studied two client-side framework/library, jQuery and Bootstrap. For example, we developed TRU Questions & Aanswers in COMP 3540, and the app uses the 1-1 model.
    • In COMP 3540, we learned that sometimes we need to use some frameworks and libraries for fast development, better user-interface, and layout design. The jQuery library and Bootstrap libraries are imported and used in the client-side programs.
    • How about the next applications and systems in the Internet? Do they use the 1-1 model?
      • Messaging and chatting, especially for groups
      • Video/audio conferencing
      • Applications that use Firebase db system
      In the above applications, the same data should be distributed to multiple clients. They seem to use the multiple clients to one server model, i.e., the n-1 model.
    • Let's think about the next other applications and systems in the Internet. Do they use the 1-1 model or the n-1 model?
      • Applications that use the Google and Facebook authentication services
      • E-commerce applications that use the PayPal service
      • Applications that the Google map service
      In the above applications, the app server and/or the app client(s) get the service, i.e., data, from other service providers (service servers). They seem to use one client or multiple clients and one app server and multiple service servers model, i.e., the 1-1-m model or the n-1-m model.
    • The n-1-m model -
    • What do we need to study for the development of applications and systems that use the n-1-m model?
  4. Issues
    • Synchronization
      • Examples - Video/audio conferencing; Firebase applications; ...
      • Pushing and stateful communication - How can an app server distribute data to multiple clients? (Note that HTTP does not support the stateful communication and HTTP connection always starts from the client, not from the server.)
      • Data and view binding - In a client, how can the new data sent from the app server be automatically updated with the user view?
      • Client-side databases - How can a client keep the data that was updated in the offline state and send it to the server later?
    • Web services
      • Examples of service servers - Google Maps service; PayPal service; ... (Note that app servers can be service servers.)
      • Web service models - How to provide web services?
      • Cross-origin resource sharing (CORS) - How to get data from other servers? (Note that by default web browsers block any code and data coming from other systems for security.)
    • Development
      • APIs and libraries - How to implement and provide services?
      • What server-side languages and database systrms?
    • Overall diagram -
  5. Learning objectives
    • Understand the major areas and challenges of web programming
    • Use advanced web technologies
      • Node.js - a server-side JavaScript runtime environment
      • React.js
      • Express.js
      • Template engines
      • MongoDB - a server-side NoSQL database system
      • [WebStorage and IndexedDB - client-side database systems]
      • WebSocket for stateful communication
      • AngularJS, T3PO - client-side libriries that support data-view binding
      • [WebPush for pushing]
      • [WebWorker for background processing]
      • [WebRTC for real time communication]
    • Understand and use advanced web topics
      • Web services, and REST
      • [XML for data exchange format]
      • CORS for cross origin resorce sharing
    • Design and implement
      • Web server system with Node.js
      • Web applications using React.js
      • Dynamic web applications with MongoDB and Node.js
      • REST Web services with Express and Node.js
      • Real-time communication systems with WebSocket and Node.js
      • Client-side JavaScript libraries
  6. Lecture topics
    • JavaScript runtime environment
      • Introduction to Node.js
    • Client-side JavaScript library
      • React.js with Node.js
    • Server-side technologies
      • Development of Web server with Node.js
      • Template engines with Node.js and Express.js
      • Introduction to MongoDB
      • Access to MongoDB with Node.js
    • Web services
      • Development of a client-server service that helps the client access the server with functions
      • Introduction to web services and REST
      • [Introduction to XML]
      • Introduction to CORS
      • Development of a web service, TUMS, that supports user management, with Express and Node.js
    • Real-time communication systems
      • Introduction to WebSocket
      • [Introduction to WebPush]
      • [Introduction to WebWorker]
      • Development of a real-time communication app with T3PO, TUMS, WebSocket, [WebWorker,] and Node.js
    • Client-side libraries
      • Development of jQuery like JavaScript library
      • Introduction to AngularJS and T3PO
      • Development of a data-view binding library, T3PO
    • Etc
      • [WebStorage and IndexedDB]
      • [WebRTC]
  7. Seminar/Lab topics
    • Development of jQuery like library
    • Development of a data-view binding library
    • Development of web server with Node.js
    • Access to MongoDB with Node.js
    • Development of a client-server service that supports the client to use the server with functions
    • Development of a web service, TUMS, that supports user management
    • Development of a chatting app with T3PO, TUMS, [WebWorker,] WebSocket, Node.js
  8. Expectations
    • Self-directed learning
    • Self-motivated learning
  9. Course outline
  10. Instructor
    • Dr. Mahnhoon Lee
    • SCI 136
    • (250) 377-6022
    • mlee@tru.ca
    • Timetable
  11. How to study well - Is motivation good enough?
    • There are many general ideas. Can you suggest good ideas?
    • Some of them are more important. What are they?
    • There are two types of habits, winning habits and loosing habits.
    • Winning habits are ...
    • Loosing habits are ...